<template>
  <div class="kxz-callLog__dialog4">
    <com-form>
      <el-form :inline="true" :model="form" class="kxz-callLog__dialog4__form">
        <el-form-item label="红包状态:">
          <el-select v-model="form.status" placeholder="请选择" popper-class="kxz-callLog__sel" @change="handleSelChange">
            <el-option
              v-for="item in optStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="限用日期:" class="sel2">
          <el-select v-model="form.dateType" placeholder="请选择" popper-class="kxz-callLog__sel" @change="handleSelChange">
                <el-option
                  v-for="item in optXy"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </com-form>
    <com-table>
      <table class="table">
        <tr>
          <th>红包说明</th>
          <th>红包金额</th>
          <th>领取时间</th>
          <th>到期时间</th>
        </tr>
        <template v-if="hb.data && hb.data.length > 0">
          <tr v-for="(item, index) in hb.data" :key="index">
            <td v-text="item.cSm"></td>
            <td v-text="item.fJe"></td>
            <td v-text="item.tDate"></td>
            <td v-text="item.fDqsj"></td>
          </tr>
        </template>
      </table>
    </com-table>
    <p v-if="hb.num === 0" :class="$style.empty">暂无记录</p>
    <el-pagination v-else-if="hb.num > 0" layout="prev, pager, next" :page-size="pageSize" :total="hb.num" @current-change="handleChangePage">
    </el-pagination>
  </div>
</template>

<script>
// import ComForm from './comForm.vue'
import ComForm from '../../../../../components/comTable'
import ComTable from '../../../../../components/comTable'
export default {
  name: 'dialog4',
  props: {
    Phb: Object
  },
  data() {
    return {
      pageSize:10,
      curIndex: 1,
      form: {
        status: 0,
        dateType: 0
      },
      optStatus: [
        {value:0,label:'全部'},
        {value:1,label:'可用'},
        {value:2,label:'已用'},
        {value:3,label:'过期'}
      ],
      optXy: [
        {value:0,label:'全部'},
        {value:2,label:'1月红包'},
        {value:8,label:'3月红包'},
        {value:9,label:'6月红包'},
        {value:10,label:'12月红包'}
      ],
      hb:{
        data:[],
        num:0
      }
    }
  },
  components: {
    ComTable,
    ComForm
  },
  mounted(){
    this.getHb()
  },
  methods: {
    handleChangePage(currentPage){
      this.curIndex = currentPage
      this.getHb()
    },
    handleSelChange(){
      this.getHb()
    },
    async getHb() {
      try{
        const {leadInMsg} = this.$store.getters.callMsg
        const fUid = leadInMsg.id
        if(fUid === undefined){
          return
        }
        const initHb = {
          data:[],
          num:0
        }
        const pageSize = this.pageSize
        const page = this.curIndex
        const {status,dateType} = this.form
        const {data} = await this.$get(this,{
          api:'member/loadRedPacket.do',
          data:{
            fUid,
            page,
            pageSize,
            flag: status,
            fLx:dateType
          }
        })
        if(data.state === 0){
          if(data.content){
            this.hb = {
              num: data.content[0],
              data: data.content[1]
            }
          }else{
            this.hb = initHb
          }
          return
        }
      }catch(e){
        this.$warn('系统member/loadRedPacket.do接口报错')
      }
    },
  }
}
</script>
<style lang="scss" module>
.empty{
  padding:15px;
  text-align:center;
}
</style>

<style lang="scss">
.kxz-callLog__dialog4__form {
  .el-input__inner {
    width: 132px;
  }
  .sel2 {
    margin-left: 14px;
  }
}
.kxz-callLog__dialog4{
  .el-pagination{
    text-align:right;
  }
}
</style>
